<script>
  init({
    title: 'Modal Table',
    desc: 'Use Bootstrap Table in modal.',
    links: ['bootstrap-table.min.css'],
    scripts: ['bootstrap-table.min.js']
  })
</script>

<button type="button" class="button is-primary is-large lunch">
  Launch modal table
</button>

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal table</p>
      <button class="delete close" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <table id="table"
        data-toggle="table"
        data-height="299"
        data-url="json/data1.json">
        <thead>
          <tr>
            <th data-field="id">ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
          </tr>
        </thead>
      </table>
    </section>
    <footer class="modal-card-foot">
      <button class="button close">Close</button>
    </footer>
  </div>
</div>

<script>
  var $table = $('#table')

  function mounted() {
    $('.lunch').click(function () {
      $('.modal').addClass('is-active')
      $table.bootstrapTable('resetView')
    })
    $('.close').click(function () {
      $('.modal').removeClass('is-active')
    })
  }
</script>
